<template>
   <div class="edit-blog">
          <h1 class="edit-title">编辑博客</h1>
          <div class="edit-form">
            <div class="form-group">
              <label for="title">标题：</label>
              <input type="text" id="title" v-model="blog.title" class="form-control">
            </div>
            <div class="form-group">
              <label for="author">作者：</label>
              <input type="text" id="author" v-model="blog.author" class="form-control">
            </div>
            <div class="form-group">
              <label for="flag">类别：</label>
              <input type="text" id="flag" v-model="blog.flag" class="form-control">
            </div>
            <div class="button-group">
              <button @click="save" class="btn btn-primary">保存</button>
              <button @click="cancel" class="btn btn-secondary">取消</button>
            </div>
          </div>
        </div>
</template>

<script setup>
  import { reactive, onMounted } from 'vue';
  import axios from 'axios';
  import { useRouter } from 'vue-router';
  const router = useRouter();
  const blog = reactive({
    id: 0,
    title: '',
    author: '',
    flag: ''
  });
  onMounted(async () => {
    // 获取编辑的博客数据
    const blogId = router.currentRoute.value.params.id;
    const res = await axios.get(`http://localhost:3000/blog/${blogId}`);
    Object.assign(blog, res.data.data);
    // 使用 Object.assign 方法将数据合并到 blog 对象中
  });
  async function save() {
    let res = await axios.put(`http://localhost:3000/blog/${blog.id}`, blog);
    if (res.data.code === 1000) {
      router.push('/app');
    }
  }

  function cancel() {
    router.push('/app');
  }

</script>
<style scoped>
       .edit-blog {
          max-width: 600px;
          margin: 0 auto;
          padding: 20px;
        }
        
        .edit-title {
          font-size: 24px;
          margin-bottom: 20px;
        }
        
        .edit-form {
          background-color: #f9f9f9;
          padding: 20px;
          border-radius: 8px;
        }
        
        .form-group {
          margin-bottom: 15px;
        }
        
        .label {
          font-weight: bold;
        }
        
        .form-control {
          width: 100%;
          padding: 8px;
          border: 1px solid #ccc;
          border-radius: 4px;
        }
        
        .button-group {
          margin-top: 20px;
        }
        
        .btn {
          padding: 8px 20px;
          border: none;
          border-radius: 4px;
          cursor: pointer;
        }
        
        .btn-primary {
          background-color: #007bff;
          color: #fff;
        }
        
        .btn-secondary {
          background-color: #6c757d;
          color: #fff;
        }
</style>
